<template>
  <div>
    <!-- 新增部门弹出框 -->
    <div class="updatePwd" v-show="updatePopShow">
      <transition name="slide-fade">
        <div class="updatePwd-content" v-show="updatePopShow">
          <div class="up-content-title">
            <div>
              选择人员
            </div>
            <div @click="cancelClick">
              X
            </div>
          </div>
          <div class="up-content-main">
            <div class="transfer-left">
              <div class="transfer-title">
                选择：
              </div>
              <div class="transfer-main transfer-mainLeft">
                <div class="transfer-ml-bread">
                  <div class="transfer-ml-breadMain">
                    <ul>
                      <li v-show="breadListsOvShow" class="breadMainLiBack">
                        <div @click="breadListsSelectOneClick">
                          «
                        </div>
                      </li>
                      <li :class="{breadMainLi:true,breadMainSeleteLi:isBreadMainSeleteLi == index}" :key="index" v-for="(item,index) in breadLists">
                        <div @click="breadListsClick(index)">{{item.name}}</div>
                        <div v-show="isBreadMainSeleteLi != index">></div>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- <div class="transfer-ml-selectAll">
                  <div v-show="transferPDepitLLists.length > 0" class="transfer-ml-selectAllMain" @click="leftSelectAllClick">
                    <div>
                      <img v-if="transferselectAllShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                      <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                    </div>
                    <div>
                      全选
                    </div>
                  </div>
                </div> -->
                <div class="transfer-ml-list">
                  <ul>
                    <li class="transferMlListLi" :key="index" v-for="(item,index) in transferPDepitLLists">
                      <div class="transferMlListLiLeft" v-if="item.isAuth == 1">
                        <div class="trMlLiLiLeSlect">
                          <div @click="transferPLListsSelectClick(index)">
                            <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                            <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectImg" @click="transferPLListsSelectClick(index)">
                          <div>
                            <img src="/static/img/iconfont_page_personnel@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectTypeDept" @click="transferPLListsSelectClick(index)">
                          {{item.name}}
                        </div>
                      </div>
                      <div class="transferMlListLiLeft" v-else>
                        <div class="trMlLiLiLeSlect">
                          <div>
                            <img src="/static/img/Group.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectImg">
                          <div>
                            <img src="/static/img/iconfont_page_personnel@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectTypeDept">
                          {{item.name}}
                        </div>
                      </div>
                      <div class="transferMlListLiRight">
                        <img @click="leftNextClick(index)" src="/static/img/下一级.png" alt="">
                        <div @click="leftNextClick(index)">下级</div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="transfer-right">
              <div class="transfer-title">
                已选：
              </div>
              <div class="transfer-main transfer-mainRight">
                <ul>
                  <li class="transferPRLi" :key="index" v-for="(item,index) in transferPRLists">
                    <div>
                      <img src="/static/img/iconfont_page_personnel@2x.png" alt="">
                      <div>{{item.name}}</div>
                    </div>
                    <div @click="righttransferPRListsClick(index)">
                      <img src="/static/img/清空.png" alt="">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="up-content-but">
            <div></div>
            <div @click="affirmClick">
              保存
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  props: ["updatePop", "DepttransferPDepitLListspop", "Deptselectpop"],
  data() {
    return {
      leftNextClickTrue: false, // 下一级验证
      leftSearchVal: "", // 搜索
      searchValClearShow: false, // 搜索清空搜索清空
      breadListsOvShow: false, // 导航超过三个显示
      updatePopShow: false, // 人员选择列表
      transferPRLists: [], //选中人员列表
      transferPRListsCopyArr: [], // 选中人员列表备份，取消时使用
      isBreadMainSeleteBackShow: false, // 返回顶部
      transferselectAllShow: false, // 全选
      isBreadMainSeleteLi: 0, // 选中导航
      breadLists: [], // 人员面包屑
      breadCopyLists: [], // 人员面包屑监视数组
      transferPDepitLLists: [] // 未选中列表-部门部门
    };
  },
  created: function() {},
  mounted: function() {},
  watch: {
    leftSearchVal(val) {
      var self = this;
      if (val.length > 0) {
        self.searchValClearShow = true;
      } else {
        self.searchValClearShow = false;
      }
    },
    updatePop(val) {
      var self = this;
      self.breadListsOvShow = false;
      self.transferselectAllShow = false;
      self.updatePopShow = val;
      self.transferPDepitLLists = [];
      // 编辑时传入已有部门
      self.transferPRLists = [];
      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                var arr = [];
                data.data.deptList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    isAuth: ele.isAuth || "1",
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });
                self.transferPDepitLLists = arr;
                if (self.Deptselectpop.length > 0) {
                  self.transferPRListsCopyArr = [];
                  self.Deptselectpop.forEach(function(ele) {
                    self.transferPRListsCopyArr.push({
                      companyId: ele.companyId,
                      createTime: ele.createTime,
                      isAuth: ele.isAuth || "1",
                      id: ele.id,
                      memberCount: ele.memberCount,
                      name: ele.name,
                      orgType: ele.orgType,
                      parentId: ele.parentId,
                      sortEmpty: ele.sortEmpty
                    });
                  });
                  self.transferPRLists = self.Deptselectpop;
                  self.updateListsFun();
                }
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
      self.breadLists = [
        {
          name: "通讯录",
          id: sessionStorage.getItem("ORGID")
        }
      ];
      self.breadCopyLists = [
        {
          name: "通讯录",
          id: sessionStorage.getItem("ORGID")
        }
      ];
      self.isBreadMainSeleteLi = 0;
    },
    DepttransferPDepitLListspop(val) {
      var self = this;
      // self.transferPDepitLLists = val;
    }
  },
  methods: {
    // 编辑时调用
    updateListsFun() {
      var self = this;
      var leftPSlectArr = [];
      self.transferPDepitLLists.forEach(function(elel, indl) {
        if (elel.isAuth == 1) {
          self.transferPRLists.forEach(function(eler, indr) {
            if (eler.name == elel.name) {
              leftPSlectArr.push(eler);
              self.transferPDepitLLists[indl].show = true;
            }
          });
        }
      });
      var isAuthTrue = false;
      var isAuthTrueArr = [];
      self.transferPDepitLLists.forEach(function(ele, ind) {
        if (ele.isAuth == 1) {
          isAuthTrueArr.push(ele);
          isAuthTrue = true;
        }
      });
      if (isAuthTrue == true) {
        if (leftPSlectArr.length == isAuthTrueArr.length) {
          self.transferselectAllShow = true;
        } else {
          self.transferselectAllShow = false;
        }
      } else {
        self.transferselectAllShow = false;
      }
    },
    // 部门确认
    affirmClick() {
      var self = this;
      self.updatePopShow = false;
      this.$emit("affirm", self.transferPRLists);
    },
    // 人员取消
    cancelClick() {
      var self = this;
      this.updatePopShow = false;
      this.$emit("cancel", this.transferPRListsCopyArr);
    },
    // 左边点击返回第一层
    breadListsSelectOneClick() {
      var self = this;
      self.breadLists = [];
      self.breadCopyLists.splice(1, self.breadCopyLists.length);
      self.breadLists.unshift({
        name: self.breadCopyLists[0].name,
        id: self.breadCopyLists[0].id
      });
      self.isBreadMainSeleteLi = self.breadLists.length - 1;
      self.breadListsOvShow = false;

      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: self.breadCopyLists[0].id
        })
        .then(data => {
          self.transferPDepitLLists = [];
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                data.data.deptList.forEach(function(ele, ind) {
                  self.transferPDepitLLists.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    isAuth: ele.isAuth || "1",
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });
                var leftPSlectArr = [];
                self.transferPDepitLLists.forEach(function(elel, indl) {
                  if (elel.isAuth == 1) {
                    self.transferPRLists.forEach(function(eler, indr) {
                      if (eler.name == elel.name) {
                        leftPSlectArr.push(eler);
                        self.transferPDepitLLists[indl].show = true;
                      }
                    });
                  }
                });
                var isAuthTrue = false;
                var isAuthTrueArr = [];
                self.transferPDepitLLists.forEach(function(ele, ind) {
                  if (ele.isAuth == 1) {
                    isAuthTrueArr.push(ele);
                    isAuthTrue = true;
                  }
                });
                if (isAuthTrue == true) {
                  if (leftPSlectArr.length == isAuthTrueArr.length) {
                    self.transferselectAllShow = true;
                  } else {
                    self.transferselectAllShow = false;
                  }
                } else {
                  self.transferselectAllShow = false;
                }
              } else {
                self.transferPDepitLLists = [];
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.transferPDepitLLists = [];
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 左边点击导航
    breadListsClick(index) {
      var self = this;
      var indeName = self.breadLists[index].name;
      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: self.breadLists[index].id
        })
        .then(data => {
          self.transferPDepitLLists = [];
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                self.transferPDepitLLists = []; // 成员未选中列表-部门
                data.data.deptList.forEach(function(ele, ind) {
                  self.transferPDepitLLists.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    isAuth: ele.isAuth || "1",
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });

                if (self.breadCopyLists.length > 3) {
                  self.breadLists = [];
                  var selectIndex = 0;
                  self.breadCopyLists.forEach(function(ele, ind) {
                    if (ele.name == indeName) {
                      self.breadLists.unshift({
                        name: self.breadCopyLists[ind].name,
                        id: self.breadCopyLists[ind].id
                      });
                      if (ind > 0) {
                        self.breadLists.unshift({
                          name: self.breadCopyLists[ind - 1].name,
                          id: self.breadCopyLists[ind - 1].id
                        });
                        selectIndex = ind;
                        if (ind > 1) {
                          self.breadLists.unshift({
                            name: self.breadCopyLists[ind - 2].name,
                            id: self.breadCopyLists[ind - 2].id
                          });
                          selectIndex = ind;
                        }
                      }
                    }
                  });

                  self.breadCopyLists.splice(
                    selectIndex + 1,
                    self.breadCopyLists.length
                  );

                  if (self.breadCopyLists.length > 3) {
                    self.breadListsOvShow = true;
                  } else {
                    self.breadListsOvShow = false;
                  }
                } else {
                  self.breadLists = [];
                  self.breadCopyLists.splice(
                    index + 1,
                    self.breadCopyLists.length
                  );
                  self.breadCopyLists.forEach(function(ele, ind) {
                    self.breadLists.push({
                      name: ele.name,
                      id: ele.id
                    });
                  });
                  self.breadListsOvShow = false;
                }
                self.isBreadMainSeleteLi = self.breadLists.length - 1;
                var leftPSlectArr = [];
                self.transferPDepitLLists.forEach(function(elel, indl) {
                  if (elel.isAuth == 1) {
                    self.transferPRLists.forEach(function(eler, indr) {
                      if (eler.name == elel.name) {
                        leftPSlectArr.push(eler);
                        self.transferPDepitLLists[indl].show = true;
                      }
                    });
                  }
                });
                var isAuthTrue = false;
                var isAuthTrueArr = [];
                self.transferPDepitLLists.forEach(function(ele, ind) {
                  if (ele.isAuth == 1) {
                    isAuthTrueArr.push(ele);
                    isAuthTrue = true;
                  }
                });
                if (isAuthTrue == true) {
                  if (leftPSlectArr.length == isAuthTrueArr.length) {
                    self.transferselectAllShow = true;
                  } else {
                    self.transferselectAllShow = false;
                  }
                } else {
                  self.transferselectAllShow = false;
                }
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.transferPDepitLLists = [];
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 左边下一级
    leftNextClick(index) {
      var self = this;
      if (self.leftNextClickTrue == false) {
        self.leftNextClickTrue = true;
        // 获取下一级导航变化
        self.breadCopyLists.push({
          name: self.transferPDepitLLists[index].name,
          id: self.transferPDepitLLists[index].id
        });
        if (self.breadCopyLists.length < 4) {
          self.breadListsOvShow = false;
          self.breadLists.push({
            name: self.transferPDepitLLists[index].name,
            id: self.transferPDepitLLists[index].id
          });
        } else {
          self.breadListsOvShow = true;
          self.breadLists.shift();
          self.breadLists.push({
            name: self.transferPDepitLLists[index].name,
            id: self.transferPDepitLLists[index].id
          });
        }
        self.transferselectAllShow = false;
        self.isBreadMainSeleteLi = self.breadLists.length - 1;

        self
          .getbookapibookselectdepttree({
            appid: sessionStorage.getItem("getAppid"),
            memberId: sessionStorage.getItem("memberId"),
            deptId: self.transferPDepitLLists[index].id
          })
          .then(data => {
            self.transferPDepitLLists = [];
            self.leftNextClickTrue = false;
            if (data.statusCode == 200) {
              if (data.data) {
                if (data.data.deptList) {
                  self.transferPDepitLLists = []; // 成员未选中列表-部门
                  data.data.deptList.forEach(function(ele, ind) {
                    self.transferPDepitLLists.push({
                      companyId: ele.companyId,
                      createTime: ele.createTime,
                      isAuth: ele.isAuth || "1",
                      id: ele.id,
                      memberCount: ele.memberCount,
                      name: ele.name,
                      orgType: ele.orgType,
                      parentId: ele.parentId,
                      sortEmpty: ele.sortEmpty,
                      show: false
                    });
                  });

                  var leftPSlectArr = [];
                  self.transferPDepitLLists.forEach(function(elel, indl) {
                    if (elel.isAuth == 1) {
                      self.transferPRLists.forEach(function(eler, indr) {
                        if (eler.name == elel.name) {
                          leftPSlectArr.push(eler);
                          self.transferPDepitLLists[indl].show = true;
                        }
                      });
                    }
                  });
                  var isAuthTrue = false;
                  var isAuthTrueArr = [];
                  self.transferPDepitLLists.forEach(function(ele, ind) {
                    if (ele.isAuth == 1) {
                      isAuthTrueArr.push(ele);
                      isAuthTrue = true;
                    }
                  });
                  if (isAuthTrue == true) {
                    if (leftPSlectArr.length == isAuthTrueArr.length) {
                      self.transferselectAllShow = true;
                    } else {
                      self.transferselectAllShow = false;
                    }
                  } else {
                    self.transferselectAllShow = false;
                  }
                }
              }
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.transferPDepitLLists = [];
            self.leftNextClickTrue = false;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 左边全选
    leftSelectAllClick() {
      var self = this;
      var leftPSlectArr = [];
      var allTrue = false;
      self.transferPDepitLLists.forEach(function(ele, ind) {
        if (ele.isAuth == 1) {
          allTrue = true;
        }
      });
      if (allTrue == true) {
        self.transferselectAllShow = !self.transferselectAllShow;
        self.transferPDepitLLists.forEach(function(elel, indl) {
          if (elel.isAuth == 1) {
            elel.show = self.transferselectAllShow;
            self.transferPRLists.forEach(function(eler, indr) {
              if (elel.name == eler.name) {
                eler.show = self.transferselectAllShow;
              }
            });
            if (elel.show == true) {
              self.transferPRLists.push({
                companyId: elel.companyId,
                createTime: elel.createTime,
                isAuth: elel.isAuth || "1",
                id: elel.id,
                memberCount: elel.memberCount,
                name: elel.name,
                orgType: elel.orgType,
                parentId: elel.parentId,
                show: elel.show,
                sortEmpty: elel.sortEmpty
              });
              leftPSlectArr.push({
                companyId: elel.companyId,
                createTime: elel.createTime,
                isAuth: elel.isAuth || "1",
                id: elel.id,
                memberCount: elel.memberCount,
                name: elel.name,
                orgType: elel.orgType,
                parentId: elel.parentId,
                show: elel.show,
                sortEmpty: elel.sortEmpty
              });
            }
          }
        });
        var isAuthTrue = false;
        var isAuthTrueArr = [];
        self.transferPDepitLLists.forEach(function(ele, ind) {
          if (ele.isAuth == 1) {
            isAuthTrueArr.push(ele);
            isAuthTrue = true;
          }
        });
        if (isAuthTrue == true) {
          if (leftPSlectArr.length == isAuthTrueArr.length) {
            self.transferselectAllShow = true;
          } else {
            self.transferselectAllShow = false;
          }
        } else {
          self.transferselectAllShow = false;
        }
        // 获取右边所有当前列表中包含的参数
        var indexArr = [];
        self.transferPRLists.forEach(function(ele, ind) {
          if (ele.show == false) {
            indexArr.push({ name: ele.name });
          }
        });
        // 数组去重
        var hash = {};
        self.transferPRLists = self.transferPRLists.reduce(function(
          item,
          next
        ) {
          hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
          return item;
        },
        []);
        // self.transferPRLists = leftPSlectArr;
        // 数组求差集
        var isNaN = Number.isNaN;
        self.transferPRLists = self.transferPRLists.reduce(function(
          previous,
          i
        ) {
          var found = indexArr.findIndex(function(j) {
            return j.name === i.name || (isNaN(i.name) && isNaN(j.name));
          });
          return found < 0 && previous.push(i), previous;
        },
        []);
      }
    },
    // 左边点击选中
    transferPLListsSelectClick(index) {
      var self = this;
      var leftPSlectArr = [];
      if (
        self.transferPRLists.length == 1 &&
        self.transferPDepitLLists[index].show == false
      ) {
        self.$message({
          type: "info",
          message: "只能选择一个部门"
        });
      } else {
        // 修改勾选
        self.transferPDepitLLists[index].show = !self.transferPDepitLLists[
          index
        ].show;
        // 当左边取消时，右边也跟随取消
        if (self.transferPDepitLLists[index].show == false) {
        }
        self.transferPRLists.forEach(function(ele, ind) {
          if (ele.name == self.transferPDepitLLists[index].name) {
            self.transferPRLists[ind].show = false;
            self.transferPRLists.splice(ind, 1);
          }
        });
        self.transferPDepitLLists.forEach(function(ele, ind) {
          if (ele.show == true) {
            self.transferPRLists.push(ele);
            leftPSlectArr.push(ele);
          }
        });
        var hash = {};
        self.transferPRLists = self.transferPRLists.reduce(function(
          item,
          next
        ) {
          hash[next.name] ? "" : (hash[next.name] = true && item.push(next));
          return item;
        },
        []);
        var isAuthTrue = false;
        var isAuthTrueArr = [];
        self.transferPDepitLLists.forEach(function(ele, ind) {
          if (ele.isAuth == 1) {
            isAuthTrueArr.push(ele);
            isAuthTrue = true;
          }
        });
        if (isAuthTrue == true) {
          if (leftPSlectArr.length == isAuthTrueArr.length) {
            self.transferselectAllShow = true;
          } else {
            self.transferselectAllShow = false;
          }
        } else {
          self.transferselectAllShow = false;
        }
      }
    },
    // 右边选中删除
    righttransferPRListsClick(index) {
      var self = this;
      var leftPSlectArr = [];
      self.transferPRLists[index].show = !self.transferPRLists[index].show;
      // 修改左边勾选状态
      self.transferPDepitLLists.forEach(function(ele, ind) {
        if (ele.name == self.transferPRLists[index].name) {
          self.transferPDepitLLists[ind].show = false;
        }
      });
      self.transferPRLists.splice(index, 1);
      self.transferPDepitLLists.forEach(function(ele, ind) {
        if (ele.isAuth == 1) {
          if (ele.show == true) {
            leftPSlectArr.push(ele);
          }
        }
      });
      var isAuthTrue = false;
      var isAuthTrueArr = [];
      self.transferPDepitLLists.forEach(function(ele, ind) {
        if (ele.isAuth == 1) {
          isAuthTrueArr.push(ele);
          isAuthTrue = true;
        }
      });
      if (isAuthTrue == true) {
        if (leftPSlectArr.length == isAuthTrueArr.length) {
          self.transferselectAllShow = true;
        } else {
          self.transferselectAllShow = false;
        }
      } else {
        self.transferselectAllShow = false;
      }
    },
    ...mapActions(["getbookapibookselectdepttree"])
  }
};
</script>
<style scoped>
.transferMlListLiRight {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 11px;
  color: #333;
}

.transferMlListLiRight img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.trMlLiLiLeSlectTypeDept {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  color: #333;
  margin-left: 5px;
  /* border: 1px solid red; */
}

.trMlLiLiLeSlectImg {
  height: 20px;
  width: 20px;
  margin-left: 10px;
}
.trMlLiLiLeSlect {
  height: 20px;
  width: 20px;
}

.trMlLiLiLeSlect > div,
.trMlLiLiLeSlectImg > div {
  width: 20px;
  height: 20px;
}

.trMlLiLiLeSlect img,
.trMlLiLiLeSlectImg img {
  width: 20px;
  height: 20px;
}

.transferMlListLiLeft {
  min-width: 10px;
  display: flex;
  align-items: center;
  margin-left: 17px;
}

.transferMlListLi:hover {
  background-color: rgb(231, 234, 239);
}

.transferMlListLi {
  width: 100%;
  height: 35px;
  margin-top: 3px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.transfer-ml-list ul {
  width: 100%;
}

.transfer-ml-list {
  display: flex;
  height: 280px;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.transfer-ml-selectAllMain > div:nth-child(1) {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.transfer-ml-selectAllMain > div:nth-child(2) {
  font-size: 14px;
  margin-left: 7px;
  cursor: pointer;
}

.transfer-ml-selectAllMain > div img {
  width: 20px;
  height: 20px;
}

.transfer-ml-selectAllMain {
  width: 90%;
  display: flex;
  height: 20px;
  overflow: hidden;
  align-items: center;
}

.transfer-ml-selectAll {
  display: flex;
  height: 22px;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  margin-top: 5px;
}

.breadMainLiBack {
  color: #38adff;
  width: 12px;
  height: 20px;
  cursor: pointer;
  margin-right: 5px;
}

.breadMainLi {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.breadMainLi > div:nth-child(1) {
  color: #38adff;
  font-size: 14px;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.breadMainLi > div:nth-child(2) {
  font-size: 14px;
  color: #ccc;
  margin-left: 5px;
}

.breadMainSeleteLi > div:nth-child(1) {
  color: #333 !important;
}

.transfer-ml-breadMain ul {
  display: flex;
  height: 20px;
  width: 100%;
  overflow: hidden;
}

.transfer-ml-breadMain {
  width: 90%;
  display: flex;
  height: 20px;
  overflow: hidden;
}

.transfer-ml-bread {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.transfer-ml-search > div {
  width: 90%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.transfer-ml-search input {
  font-size: 14px;
  border: 0px solid #ccc;
  min-height: 25px;
  border-radius: 5px;
  height: 32px;
  width: calc(100% - 10px);
  background-color: #fff;
}

.transfer-ml-search > div > div:nth-child(1) {
  width: 32px;
  display: flex;
  align-items: center;
  height: 32px;
  justify-content: center;
}

.transfer-ml-search > div > div:nth-child(2) {
  width: calc(100% - 55px);
}

.transfer-ml-search > div > div:nth-child(1) img {
  width: 15px;
  height: 15px;
}

.transfer-ml-search > div > div:nth-child(3) {
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transfer-ml-search > div > div:nth-child(3) img {
  width: 15px;
  height: 15px;
}

.transfer-ml-search {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 15px;
}

.transferPRLi {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  cursor: pointer;
}

.transferPRLi:hover {
  background-color: rgb(231, 234, 239);
}

.transferPRLi > div:nth-child(1) {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  margin-left: 15px;
}

.transferPRLi > div:nth-child(2) {
  font-size: 14px;
  color: #ccc;
  margin-left: 15px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
  line-height: 18px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transferPRLi > div:nth-child(1) > div {
  max-width: 200px;
  overflow: hidden;
  margin-left: 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transferPRLi > div:nth-child(1) img {
  width: 20px;
  height: 20px;
}

.transfer-mainRight {
  overflow-x: hidden;
  overflow-y: scroll;
}

.transfer-main {
  width: 92%;
  height: 50px;
  font-size: 16px;
  color: #333;
  height: 350px;
  background-color: #f4f6f8;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.transfer-title {
  width: 92%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #333;
}

.transfer-left {
  width: 50%;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 15px;
}

.transfer-right {
  width: 50%;
  height: 420px;
  padding-left: 15px;
}

.up-content-main {
  height: 430px;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-around;
}

.up-content-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}

.up-content-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.up-content-title > div:nth-child(1) {
  margin-left: 15px;
}

.up-content-title > div:nth-child(2) {
  margin-right: 15px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

.up-content-title {
  height: 50px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.updatePwd-content {
  width: 90%;
  max-width: 850px;
  min-width: 850px;
  height: 550px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 70px;
}

.updatePwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  z-index: 10000000000;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}
</style>